<template>
    <!--找房委托页面  头部 和下面的表格-->
    <div>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="未分配委托" name="first">
                <!--表格部分-->
                <template>
                    <el-table align="center"
                              :data="tableData"
                              style="width: 100%">
                        <el-table-column align="center"
                                         prop="user_id"
                                         label="编号"
                                         min-width="80">
                        </el-table-column>
                        <el-table-column align="center"
                                         prop="user_name"
                                         label="会员名称"
                                         min-width="80">
                        </el-table-column>
                        <el-table-column align="center"
                                         prop="user_pet_name"
                                         label="会员昵称"
                                         min-width="80">
                        </el-table-column>
                        <el-table-column align="center"
                                         prop="user_iphone"
                                         label="会员手机号"
                                         min-width="100">
                        </el-table-column>
                        <el-table-column align="center"
                                         prop="user_email"
                                         label="邮箱"
                                         min-width="130">
                        </el-table-column>
                        <el-table-column align="center"
                                         prop="entrust_demand"
                                         label="找房需求"
                                         min-width="180">
                        </el-table-column>
                        <el-table-column align="center"
                                         prop="entrust_time"
                                         label="提交时间"
                                         min-width="120">
                        </el-table-column>
                        <el-table-column align="center"
                                         prop="people"
                                         label="操作"
                                         min-width="80">
                            <template slot-scope="scope">
                                <el-button type="text" size="mini"  @click="Distribution(scope.row)">分配</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination background layout="prev, pager, next" :total="tableData.length">
                    </el-pagination>
                </template>
            </el-tab-pane>
            <el-tab-pane label="已分配委托" name="second">
                <!--搜索框部分-->
                <template>
                    <el-row>
                        <el-col :span="24"><div class="grid-content bg-purple">
                            <el-form :inline="true" v-model="seleceFrom" class="demo-form-inline">
                                <el-col :span="7">
                                    <el-form-item label="会员注册手机">
                                        <el-input v-model="seleceFrom.user_iphone" placeholder="请输入会员注册手机"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="7">
                                    <el-form-item label="楼盘分析师">
                                        <!--问题1：下拉列表里面是将获取的值:value="item.admin_account"
                                        v-model="seleceFrom.admin_account"这里是将获取的值赋给给select
                                        也就是这两处绑定的是不一样的-->
                                        <el-select v-model="seleceFrom.admin_account" placeholder="请选择楼盘分析师">
                                            <el-option v-for="item in formInline"
                                                       :key="item.admin_account"
                                                       :label="item.admin_name"
                                                       :value="item.admin_account">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="7">
                                    <el-form-item label="提交时间">
                                        <el-date-picker type="date" placeholder="开始时间" v-model="formInline.user_reg_tiame" style="width: 100%;"></el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="3">
                                    <el-form-item>
                                        <el-button @click="onSubmitFind()" type="primary" plain>查询</el-button>
                                    </el-form-item>
                                </el-col>
                            </el-form>
                        </div></el-col>
                    </el-row>
                </template>
                <template>
                    <el-table align="center"
                              :data="alreadyData"
                              style="width: 100%">
                        <el-table-column align="center"
                                         prop="user_id"
                                         label="编号"
                                         min-width="50">
                        </el-table-column>
                        <el-table-column align="center"
                                         prop="user_name"
                                         label="会员名称"
                                         min-width="80">
                        </el-table-column>
                        <el-table-column align="center"
                                         prop="user_pet_name"
                                         label="会员昵称"
                                         min-width="80">
                        </el-table-column>
                        <el-table-column align="center"
                                         prop="admin_name"
                                         label="楼盘分析师"
                                         min-width="100">
                        </el-table-column>
                        <el-table-column align="center"
                                         prop="user_iphone"
                                         label="会员手机号"
                                         min-width="100">
                        </el-table-column>
                        <el-table-column align="center"
                                         prop="user_email"
                                         label="邮箱"
                                         min-width="130">
                        </el-table-column>
                        <el-table-column align="center"
                                         prop="entrust_demand"
                                         label="找房需求"
                                         min-width="180">
                        </el-table-column>
                        <el-table-column align="center"
                                         prop="entrust_time"
                                         label="提交时间"
                                         min-width="150">
                        </el-table-column>
                        <el-table-column align="center"
                                         prop=""
                                         label="操作"
                                         min-width="200">
                            <template slot-scope="scope">
                                <el-button type="text" size="mini" @click="manageReport(scope.row)" >管理报告</el-button>
                                <el-button type="text" size="mini" @click="editorReport(scope.row)">编辑报告</el-button>
                                <el-button type="text" size="mini" @click="addReport(scope.row)">添加报告</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination background layout="prev, pager, next" :total="alreadyData.length">
                    </el-pagination>
                </template>
            </el-tab-pane>
        </el-tabs>
        <!--管理、编辑、添加报告-->
        <ZxReportDialog
                :visible="manageVisible"
                :openState="manageVisible"
                @onclose="closeP"
                @newEdtorData="manageReport"
                :title="nowTableTitle"
                :dataAll="formNewData"
                :dataALLList="formNewDataList"
                :dataAllCon="formNewConclusion">
        </ZxReportDialog>
        <!--分配分析师弹框-->
        <ZxAnalystsDialog :visible="managePeopleVisible"
                          @onclose="closeD"
                          :data="analystsData"
                          :userId="userData"
                          @newTableDataNot="handleClick"
                          @newTableData="getLookHouse">
        </ZxAnalystsDialog>
    </div>
</template>

<script>
    import * as api from '../utils/api'
    import ZxReportDialog from './ZxReportDialog'
    import ZxAnalystsDialog from './ZxAnalystsDialog'
    export default {
        name: "ZxFindHouse",
        components:{
            ZxReportDialog,
            ZxAnalystsDialog

        },
        data() {
            return {
                /*切换选项卡*/
                activeName: 'first',
                /*分配分析师弹框*/
                managePeopleVisible:false,
                /*未分配委托====的表格数据*/
                tableData: [{
                    user_id:'',
                    user_name:'',
                    user_pet_name:'',
                    user_iphone:'',
                    user_email:'',
                    entrust_demand: '',
                    entrust_time: ''
                } ],
                /*未分配委托====的分配分析师数据*/
                analystsData:[
                    { admin_account:'',
                        admin_name: '',
                    }],
                userData:[{
                    user_id:'',
                }],
                /*=====以下已分配委托=====当前的委托分配的报告弹出框===当前标题*/
                nowTableTitle:'',
                /*委托分配的报告弹出框*/
                manageVisible:false,
                /*已经委托分配的报告弹出框===标题*/
                mapTableTitle:{
                    mangerTitle:'管理报告',
                    editTitle:'编辑报告',
                    addTitle:'添加报告',
                },
                /*已分配委托的数据*/
                alreadyData: [{
                    user_id:'',
                    user_name:'',
                    user_pet_name:'',
                    user_iphone:'',
                    admin_account:'',
                    admin_name:'',
                    user_email:'',
                    entrust_demand: '',
                    entrust_time: ''
                } ],
                /*已经分配委托====搜所框部分的===下拉列表渲染的数据*/
                formInline: [
                    {
                        admin_account:'',
                        admin_name: '',
                    }
                ],
                seleceFrom:
                    {
                        user_iphone: '',
                        admin_account:'',
                        user_reg_tiame: '',
                    },
                /*已经分配委托==弹出框表单==渲染的数据==根据user_id*/
                formData:[{
                    user_id:'',
                    user_name:'',
                    admin_account:'',
                    admin_name:'',
                    entrust_id: '',
                }],
                /*点击管理、编辑、添加报告的数据*/
                /*第一个data*/
                formNewData:{
                },
                /*第二个dataList*/
                formNewDataList:[],
                /*第三个conclusion*/
                formNewConclusion:{
                },

            };
        },
        created() {
            /*查询找房委托(未分配分析师)===表格数据*/
            this.getLookHouse()
            /*查询所有管理名称接口===已经分配委托===查询所有楼盘分析师*/
            this.getFindAdmin()
        },
        methods: {
            /*未分配委托===页面一打开数据就显示出来===查询找房委托(未分配分析师)表格内容*/
            getLookHouse(){
                this.axios({
                    url:api.GET_LOOKHOUSE,
                    method:'get',
                    params:{currentPage:1,pageSize:5}
                }).then(data=>{
                    this.tableData=data.data.data.dataList
                }).catch(err=>{

                })
            },
            /*未分配委托===点击分配按钮===显示分配弹框*/
            Distribution(item){
                this.userData.user_id=item.user_id
                this.managePeopleVisible=true
                this.axios({
                    url:api.GET_FINDHOUSEADMINNAME,
                    method:'get',
                }).then(data=>{
                    this.analystsData=data.data.data
                    /*  console.log(data.data.data)*/
                }).catch(err=>[

                ])
            },
            /*=========以下===已分配委托*/
            /*委托分配的报告弹出框上的回调函数*/
            closeP(){
                this.manageVisible=false
            },
            /*分配分析师组件上的回调函数*/
            closeD(){
                this.managePeopleVisible=false
            },
            /*点击已经分配委托===切换选项卡的时候===已分配委托卡片下的表格数据*/
            handleClick(tab, event) {
                /*console.log(tab, event);*/
                this.axios({
                    url:api.GET_LOOKHOUSEALREADY,
                    method:'get',
                    params:{currentPage:1,pageSize:5}
                }).then(data=>{
                    this.alreadyData=data.data.data.dataList
                }).catch(err=>{

                })
            },
            /*查询所有管理名称接口===已经分配委托===得到所有楼盘分析师*/
            getFindAdmin(){
                this.axios({
                    url:api.GET_FINDADMI,
                }).then(data=>{
                    this.formInline=data.data.data
                    /*这里只有admin_account:'', admin_name: '',这两个字段*/
                    /* console.log(data.data.data)*/
                }).catch(err=>{

                })
            },
            /*点击查询按钮之后===给页面重新赋值*/
            onSubmitFind() {
                console.log(this.seleceFrom);
                this.axios({
                    url:api.GET_FINDHOUSEMANGSEARCH,
                    method:'get',
                    params:{admin_account:this.seleceFrom.admin_account,
                        user_iphone:this.seleceFrom.user_iphone}
                }).then(data=>{
                    this.alreadyData=data.data.data.dataList
                }).catch(err=>{

                })
            },
            /*管理报告按钮*/
            manageReport(item){
                this.nowTableTitle=this.mapTableTitle.mangerTitle
                this.formData.user_id=item.user_id
                this.formData.entrust_id=item.entrust_id
                this.axios({
                    url:api.GET_LOOKREPORT,
                    method:'get',
                    params:{entrust_id:this.formData.entrust_id}
                }).then(data=>{
                    /* console.log('父亲那里的数据'+data)*/
                    this.formNewData=data.data.data/*我是对象*/
                    this.formNewDataList=data.data.data.analyseList/*我是对象*/
                    this.formNewConclusion=data.data.data.analyseList[0].conclusion/*我是数组*/
                    /* console.log(data.data.data,'我是data')
                     console.log(data.data.data.analyseList,'我是analyseList')
                     console.log(data.data.data.analyseList[0].conclusion,'我是analyseList')*/
                    this.manageVisible=true
                }).catch(err=>{

                })
            },
            /*编辑报告按钮===*/
            editorReport(item){
                this.nowTableTitle=this.mapTableTitle.editTitle
                console.log(this.nowTableTitle)
                this.formData.user_id=item.user_id
                this.formData.entrust_id=item.entrust_id
                this.axios({
                    url:api.GET_LOOKREPORT,
                    method:'get',
                    params:{entrust_id:this.formData.entrust_id}
                }).then(data=>{
                    /* console.log('父亲那里的数据'+data)*/
                    this.formNewData=data.data.data/*我是对象*/
                    this.formNewDataList=data.data.data.analyseList/*我是对象*/
                    this.formNewConclusion=data.data.data.analyseList[0].conclusion/*我是数组*/
                    /*console.log(data.data.data,'我是data')*/
                    /* console.log(data.data.data.analyseList,'我是analyseList')
                     console.log(data.data.data.analyseList[0].conclusion,'我是analyseList')*/
                    this.manageVisible=true
                }).catch(err=>{

                })
            },
            /*添加报告按钮===*/
            addReport(){
                this.manageVisible=true
                this.nowTableTitle=this.mapTableTitle.addTitle

            },
        }
    }
</script>

<style lang="less" scoped>
    h3{
        padding: 10px;
    }
</style>